<template>
    <view>
        <view class="wenbenk">
            <span class="ziti">姓名</span>
            <view class="account">
                <open-data type="userNickName" lang="zh_CN">
                </open-data>
            </view>
        </view>
        <view  class="wenbenk">
            <view class="ziti" >性别</view>
            <radio-group class="dianji">
                <label class="radio"><radio value="r1" checked="false" />男</label>
                <label class="radio"><radio value="r2" checked="false" />女</label>
            </radio-group>
        </view>
        <view class="wenbenk">
            <view class="ziti">生日</view>
            <radio-group class="dianji">
                <label class="radio"><radio value="r3" checked="false" />公历</label>
                <label class="radio"><radio value="r4" checked="false" />农历</label>
            </radio-group>
            <picker id="riqi" mode="date" :value="mydate" :start="startDate" :end="endDate" @change="bindDateChange">
                <view class="uni-input">{{mydate}}</view>
            </picker>
            </view>
            <button id="anniu" @click="baochun">保存信息</button>
            </view>
</template>
<script>
    export default {
        name: "gerenxinxi",
        data(){
            return{
                mydate: '选择日期'
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        methods:{
            bindDateChange: function(e) {
                this.mydate = e.target.value
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            baochun(){
                uni.navigateTo({
                    url: '/pages/wode/wode'
                })
            }
        }
    }
</script>

<style scoped>
    #anniu{
        width: 200px;
        height: 44px;
        background-color: #F48FB1FF;
        border-radius:20px;
        margin-top:55px;
    }
.ziti{
    float: left;
    margin-top:35px;
}
.wenbenk{
    height: 80px;
    border: 1px solid #D7D6D6FF;
}
    #wenb{
        margin-top:35px;
    }
    .dianji{
        margin-left: 60px;
        margin-top: 35px;
    }
    #riqi{
        float: right;
        color: #F48FB1FF;
    }
    .account{
        margin-left: 60px;
        margin-top: 35px;
    }
</style>